// 字体百分比换算
var nowClientWidth = document.documentElement.clientWidth;
// 图表数据限制条数
const graphDatalimit = 10000;
function nowSize(val, initWidth = 1920) {
  return val * (nowClientWidth / initWidth);
}

// 格式化时间
function formatTime(val) {
  return val.split(' ')[1]
}

// 标签颜色
var labelColor = ''
// 除尘器浓度实时趋势
function dusterChart(chartName, dusterData, chartData, reRender) {
  // console.log(chartName, dusterData, chartData, reRender, '除尘器浓度实时趋势...')
  var chartDom = document.getElementById(chartName);
  var myChart = null;

  if (reRender) {
    // 重新渲染（主除尘器切换，需要重新渲染图表，不能用之前图表实例进行绘制）
    myChart = echarts.init(chartDom);
  } else {
    // 用之前图表实例进行绘制
    var chartInstance = echarts.getInstanceByDom(chartDom);
    if (!chartInstance) {
      // 如果不存在, 则初始化
      myChart = echarts.init(chartDom);
    } else {
      // 如果已经存在, 则直接使用
      myChart = chartInstance;
    }
  }

  // 对图表数据容量作限制
  if (chartData.length > graphDatalimit) {
    chartData = chartData.slice(-graphDatalimit);
  }

  // 指定图表的配置项和数据
  var xAxisData = []
  var seriesData = []
  var dataZoomData = ''
  $(chartData).each(function (i, v) {
    xAxisData.push(formatTime(v.fullDataTime))
    seriesData.push(v.dataValue)
  })
  // console.log('xAxisData', xAxisData)
  // console.log('seriesData', seriesData)
  if (dusterData.detectionStatus == '正常') {
    labelColor = '#21D59B'
  } else if (dusterData.detectionStatus == '异常') {
    labelColor = '#FFD728'
  } else if (dusterData.detectionStatus == '故障') {
    labelColor = '#FE3649'
  }

  if (xAxisData.length > 7) {
    dataZoomData = {
      show: false,
      type: 'inside'
      // startValue: xAxisData[xAxisData.length-8]
    }
  } else {
    dataZoomData = {
      show: false,
      type: 'inside'
    }
  }
  var option = {
    title: {
      text: dusterData.detectionStatus,
      right: nowSize(10),
      top: nowSize(10),
      textStyle: {
        fontSize: nowSize(14),
        color: labelColor
      },
      borderColor: labelColor,
      borderWidth: 1,
      borderRadius: 15,
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(17,73,100,.7)',
      borderColor: 'rgba(33,213,155)',
      textStyle: {
        color: "#fff"
      },
    },
    grid: {
      left: "10%",
      top: "30%",
      bottom: "18%",
      right: "10%"
    },
    dataZoom: [
      dataZoomData
    ],
    xAxis: {
      type: 'category',
      data: xAxisData,
      // name: dusterData.name,
      name: '时间(s)',
      nameTextStyle: {
        color: "#fff"
      },
      axisLabel: {
        show: true,
        color: "#fff"
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#0C415C'
        }
      }
    },
    yAxis: {
      type: 'value',
      min: 0,
      name: '(' + dusterData.unit + ')',
      nameTextStyle: {
        color: "#fff"
      },
      axisLabel: {
        show: true,
        color: "#fff"
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#0C415C"
        }
      }
    },
    series: [{
      data: seriesData,
      type: 'line',
      smooth: true,
      symbol: "circle",
      symbolSize: 10,
      itemStyle: {
        color: "#9061F0",
        borderWidth: 1.5,
        borderColor: "#fff",
        shadowBlur: 10,
        shadowColor: "rgba(144, 97, 240, 0.8)"
      }
    }]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

// 气包压力实时趋势
function pocketChart(chartName, pocketData, chartData, reRender) {
  // console.log(chartData, '气包压力实时趋势...')
  var chartDom = document.getElementById(chartName);
  var myChart = null;

  if (reRender) {
    // 重新渲染（主除尘器切换或气包切换，需要重新渲染图表，不能用之前图表实例进行绘制）
    myChart = echarts.init(chartDom);
  } else {
    // 用之前图表实例进行绘制
    var chartInstance = echarts.getInstanceByDom(chartDom);
    if (!chartInstance) {
      // 如果不存在, 则初始化
      myChart = echarts.init(chartDom);
    } else {
      // 如果已经存在, 则直接使用
      myChart = chartInstance;
    }
  }

  // 对图表数据容量作限制
  if (chartData.length > graphDatalimit) {
    chartData = chartData.slice(-graphDatalimit);
  }

  // 指定图表的配置项和数据
  var xAxisData = []
  var seriesData = []
  var dataZoomData = ''
  $(chartData).each(function (i, v) {
    xAxisData.push(formatTime(v.fullDataTime))
    seriesData.push(v.dataValue)
  })
  if (pocketData.detectionStatus == '正常') {
    labelColor = '#21D59B'
  } else if (pocketData.detectionStatus == '异常') {
    labelColor = '#FFD728'
  } else if (pocketData.detectionStatus == '故障') {
    labelColor = '#FE3649'
  }
  if (xAxisData.length > 7) {
    dataZoomData = {
      show: false,
      type: 'inside'
      // startValue: xAxisData[xAxisData.length-8]
    }
  } else {
    dataZoomData = {
      show: false,
      type: 'inside'
    }
  }
  var option = {
    title: {
      text: pocketData.detectionStatus,
      right: nowSize(10),
      top: nowSize(10),
      textStyle: {
        fontSize: nowSize(14),
        color: labelColor
      },
      borderColor: labelColor,
      borderWidth: 1,
      borderRadius: 15,
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(17,73,100,.7)',
      borderColor: 'rgba(33,213,155)',
      textStyle: {
        color: "#fff"
      },
    },
    grid: {
      left: "10%",
      top: "30%",
      bottom: "18%",
      right: "10%"
    },
    dataZoom: [
      dataZoomData
    ],
    xAxis: {
      type: 'category',
      data: xAxisData,
      // name: pocketData.name,
      name: '时间(s)',
      nameTextStyle: {
        color: "#fff"
      },
      axisLabel: {
        show: true,
        color: "#fff"
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#0C415C'
        }
      }
    },
    yAxis: {
      type: 'value',
      min: 0,
      name: '(' + pocketData.unit + ')',
      nameTextStyle: {
        color: "#fff"
      },
      axisLabel: {
        show: true,
        color: "#fff"
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#0C415C"
        }
      }
    },
    series: [{
      data: seriesData,
      type: 'line',
      symbol: "circle",
      symbolSize: 10,
      itemStyle: {
        color: "#21D59B",
        borderWidth: 1.5,
        borderColor: "#fff",
        shadowBlur: 10,
        shadowColor: "rgba(30, 216, 153, 0.8)"
      }
    }]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  // 不知道干嘛的
  // myChart.currentIndex = -1;
  //myChart.setOption(option);
  //console.log(option.series[0].data[0]);
  // setInterval(function() {
  //   var dataLen = option.series[0].data.length;
  //   // 取消之前高亮的图形
  //   myChart.dispatchAction({
  //     type: 'downplay',
  //     seriesIndex: 0,
  //     dataIndex: myChart.currentIndex
  //   });
  //   myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
  //   // 高亮当前图形
  //   myChart.dispatchAction({
  //     type: 'highlight',
  //     seriesIndex: 0,
  //     dataIndex: myChart.currentIndex
  //   });
  // }, 3000);

  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

// 箱室压差实时趋势
function boxChart(chartName, boxData, chartData, reRender) {
  // console.log(chartName, boxData, chartData, reRender, '箱室压差实时趋势...')
  var chartDom = document.getElementById(chartName);
  var myChart = null;

  if (reRender) {
    // 重新渲染（主除尘器切换或箱室切换，需要重新渲染图表，不能用之前图表实例进行绘制）
    myChart = echarts.init(chartDom);
  } else {
    // 用之前图表实例进行绘制
    var chartInstance = echarts.getInstanceByDom(chartDom);
    if (!chartInstance) {
      // 如果不存在, 则初始化
      myChart = echarts.init(chartDom);
    } else {
      // 如果已经存在, 则直接使用
      myChart = chartInstance;
    }
  }

  // 对图表数据容量作限制
  if (chartData.length > graphDatalimit) {
    chartData = chartData.slice(-graphDatalimit);
  }

  var xAxisData = []
  var seriesData = []
  var dataZoomData = ''
  $(chartData).each(function (i, v) {
    xAxisData.push(formatTime(v.fullDataTime))
    seriesData.push(v.dataValue)
  })
  if (boxData.detectionStatus == '正常') {
    labelColor = '#21D59B'
  } else if (boxData.detectionStatus == '异常') {
    labelColor = '#FFD728'
  } else if (boxData.detectionStatus == '故障') {
    labelColor = '#FE3649'
  }
  if (xAxisData.length > 7) {
    dataZoomData = {
      show: false,
      type: 'inside'
      // startValue: xAxisData[xAxisData.length-8]
    }
  } else {
    dataZoomData = {
      show: false,
      type: 'inside'
    }
  }
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: boxData.detectionStatus,
      right: nowSize(10),
      top: nowSize(10),
      textStyle: {
        fontSize: nowSize(14),
        color: labelColor
      },
      borderColor: labelColor,
      borderWidth: 1,
      borderRadius: 15,
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(17,73,100,.7)',
      borderColor: 'rgba(33,213,155)',
      textStyle: {
        color: "#fff"
      },
    },
    grid: {
      left: "10%",
      top: "30%",
      bottom: "18%",
      right: "10%"
    },
    dataZoom: [
      dataZoomData
    ],
    xAxis: {
      type: 'category',
      data: xAxisData,
      // name: boxData.name,
      name: '时间(s)',
      nameTextStyle: {
        color: "#fff"
      },
      axisLabel: {
        show: true,
        color: "#fff"
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#0C415C'
        }
      }
    },
    yAxis: {
      type: 'value',
      min: 0,
      name: '(' + boxData.unit + ')',
      nameTextStyle: {
        color: "#fff"
      },
      axisLabel: {
        show: true,
        color: "#fff"
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#0C415C"
        }
      }
    },
    series: [{
      data: seriesData,
      // type: 'bar',
      // barWidth: "40%",
      // itemStyle: {
      //   color: "#00C2FF",
      //   borderRadius: [10, 10, 0, 0]
      // }
      type: 'line',
      symbol: "circle",
      symbolSize: 10,
      itemStyle: {
        color: "#00C2FF",
        borderWidth: 1.5,
        borderColor: "#fff",
        shadowBlur: 10,
        shadowColor: "rgba(0, 194, 255, 0.8)"
      }
    }],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};

// 脉冲阀脉宽量实时趋势
function pulseChart(chartName, pulseData, chartData, reRender) {
  // console.log(chartName, pulseData, chartData, reRender, '脉冲阀脉宽量实时趋势...')
  var chartDom = document.getElementById(chartName);
  var myChart = null;

  if (reRender) {
    // 重新渲染（主除尘器切换或智能阀切换，需要重新渲染图表，不能用之前图表实例进行绘制）
    myChart = echarts.init(chartDom);
  } else {
    // 用之前图表实例进行绘制
    var chartInstance = echarts.getInstanceByDom(chartDom);
    if (!chartInstance) {
      // 如果不存在, 则初始化
      myChart = echarts.init(chartDom);
    } else {
      // 如果已经存在, 则直接使用
      myChart = chartInstance;
    }
  }

  // 对图表数据容量作限制
  if (chartData.length > graphDatalimit) {
    chartData = chartData.slice(-graphDatalimit);
  }

  var xAxisData = []
  var seriesData = []
  var dataZoomData = ''
  $(chartData).each(function (i, v) {
    xAxisData.push(formatTime(v.fullDataTime))
    seriesData.push(v.dataValue)
  })
  if (pulseData.detectionStatus == '正常') {
    labelColor = '#21D59B'
  } else if (pulseData.detectionStatus == '异常') {
    labelColor = '#FFD728'
  } else if (pulseData.detectionStatus == '故障') {
    labelColor = '#FE3649'
  }
  if (xAxisData.length > 7) {
    dataZoomData = {
      show: false,
      type: 'inside'
      // startValue: xAxisData[xAxisData.length-8]
    }
  } else {
    dataZoomData = {
      show: false,
      type: 'inside'
    }
  }
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: pulseData.detectionStatus,
      right: nowSize(10),
      top: nowSize(10),
      textStyle: {
        fontSize: nowSize(14),
        color: labelColor
      },
      borderColor: labelColor,
      borderWidth: 1,
      borderRadius: 15,
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(17,73,100,.7)',
      borderColor: 'rgba(33,213,155)',
      textStyle: {
        color: "#fff"
      },
    },
    grid: {
      left: "10%",
      top: "30%",
      bottom: "18%",
      right: "13%"
    },
    dataZoom: [
      dataZoomData
    ],
    xAxis: {
      type: 'category',
      data: xAxisData,
      // name: pulseData.name,
      name: '时间(s)',
      nameTextStyle: {
        color: "#fff"
      },
      axisLabel: {
        show: true,
        color: "#fff"
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#0C415C'
        }
      }
    },
    yAxis: {
      type: 'value',
      min: 0,
      name: '(' + pulseData.unit + ')',
      nameTextStyle: {
        color: "#fff"
      },
      axisLabel: {
        show: true,
        color: "#fff"
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#0C415C"
        }
      }
    },
    series: [{
      data: seriesData,
      type: 'line',
      smooth: true,
      symbol: "circle",
      symbolSize: 10,
      itemStyle: {
        color: "#F08F37",
        borderWidth: 1.5,
        borderColor: "#fff",
        shadowBlur: 10,
        shadowColor: "rgba(240, 143, 55, 0.8)"
      },
      areaStyle: {
        color: "rgba(240, 143, 55, 0.5)"
      }
    }]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

